import React from 'react';
import { observer } from 'mobx-react';
import {Form, Input, Select, Modal } from 'antd';
import { toJS } from 'mobx';
import Store from './store';

const status = [
  { key: true, label: '正常' },
  { key: false, label: '停用' },
];

const myModal = () => {


  const pageStore = React.useContext(Store);
  const modalData = toJS(pageStore.modalData);
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form.validateFields().then((values) => {
      pageStore.addNew(values);
    });
  };

  const handleChange = (value = string) => {
    console.log('selected ${value}');
  };



  return (
    <Modal
      title={pageStore.modalTitle}
      visible={pageStore.newModalVisible}
      onOk={handleSubmit}
      onCancel={() => pageStore.setData({ newModalVisible: false })}
      okButtonProps={{ loading: pageStore.newLoading }}
    >
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} form={form}>
        <Form.Item
          label="选择基础版本"
          name="baseVersion"
          initialValue={modalData.name}
          rules={[{ required: true, whitespace: true, message: '请输入项目名称' }]}
        >
          <Select mode="选择对比基础版本" style={{ width: '100%' }}  placeholder="选择对比基础版本" 
            onChange={handleChange} 
            options={pageStore.options}
            />
        </Form.Item>

        <Form.Item
          label="选择对比版本"
          name="diffVersion"
          initialValue={modalData.name}
          rules={[{ required: true, whitespace: true, message: '请输入项目名称' }]}
        >
          <Select mode="选择对比版本" style={{ width: '100%' }}  placeholder="选择对比版本" 
            onChange={handleChange} 
            options={pageStore.options}
            />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default observer(myModal);
